<template>
  <a-form ref="formRef"
          name="custom-validation"
          :label-col="labelCol"
          :model="form"
          :rules="rules">
    <a-form-item has-feedback label="昵称">
      <a-input v-model:value="form.name" required name="name" />
    </a-form-item>
    <a-form-item has-feedback label="邮箱">
      <a-input v-model:value="form.email" required name="email" />
    </a-form-item>
    <a-form-item has-feedback label="密码">
      <a-input-password v-model:value="form.password" required name="password" />
    </a-form-item>
    <a-form-item has-feedback label="确认密码">
      <a-input-password v-model:value="form.chk_password" required name="chk_password" />
    </a-form-item>
    <a-form-item :wrapper-col="{ span: 14, offset: 2 }">
      <a-button type="primary" @click="register">注册</a-button>
    </a-form-item>
  </a-form>
</template>

<script setup>
import {ref} from "vue";

const formRef = ref()

const labelCol = { span: 2 }

/**
 * 注册表单
 * @type {Ref<UnwrapRef<{password: string, name: string, chk_password: string, email: string}>>}
 */
const form = ref({
  name: '',
  password: '',
  email: '',
  chk_password: ''
})

/**
 * 验证
 */
const chk_pwd_validate = async (_rule, value) => {
  if (value === '') {
    return Promise.reject('请输入确认密码')
  } else if (value !== form.value.password) {
    return Promise.reject('密码不匹配')
  } else {
    return Promise.resolve()
  }
}

const rules = {
  name: [{
    required: true,
    message: '请输入用户名',
    trigger: 'change'
  }],
  password: [{
    required: true,
    message: '请输入密码',
    trigger: 'change'
  }],
  chk_password: [{
    required: true,
    validator: chk_pwd_validate,
    trigger: 'change'
  }]
}

/**
 * 注册处理
 */
const register = () => {
}

/**
 * 注册请求
 */
const registerRequest = () => {

}

defineExpose({
  formRef
})
</script>

<style scoped>

</style>